<template>
  <a-form :form="form">
    <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-select v-decorator="['wx_work_setting_id',{rules: [{ required: true, message: '请选择企业名称' }]}]" @change="handleChangeStorage" placeholder="请选择企业名称" >
        <a-select-option v-for="(item, index) in wxqyList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="关联部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-tree-select
        v-decorator="[
          'partyInfo',
          { initialValue: record.partyInfo, rules: [{ required: true, message: '请选择关联部门' }] }
        ]"
        :tree-data="groupListTreeSelect"
        tree-checkable
        labelInValue
        allowClear
        :replaceFields="{ title: 'name', value: 'id' }"
        :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
      />
    </a-form-item>
    <a-divider orientation="left">样式</a-divider>
    <a-form-item label="定位类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-radio-group
        v-decorator="['type', { initialValue: record.type }]"
        button-style="solid"
        @change="handleChangePositionType"
      >
        <a-radio-button :value="10">浮窗</a-radio-button>
        <a-radio-button :value="20">内部</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-radio-group
        v-decorator="['position', { initialValue: record.position }]"
        @change="handleChangePosition"
        button-style="solid"
      >
        <a-radio-button :value="10">上边</a-radio-button>
        <a-radio-button :value="20" v-if="record.type === 10">左边</a-radio-button>
        <a-radio-button :value="30">下边</a-radio-button>
        <a-radio-button :value="40" v-if="record.type === 10">右边</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="位置调整" v-if="record.type === 10" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-slider @change="handleChangePositionValue" v-decorator="['value', { initialValue: record.value }]" />
    </a-form-item>
    <a-form-item label="大小调整" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-slider @change="handleChangePositionSize" v-decorator="['size', { initialValue: record.size }]" />
    </a-form-item>
    <a-icon style="display: none" id="qrImg" type="qrcode" />
  </a-form>
</template>

<script>
import adActionType from '@/common/enum/adActionType'
import { getDepartmentAll, optionList } from '@/api/ad'

export default {
  name: 'WXQrCode',
  props: ['ad'],
  components: {},
  data() {
    return {
      wxqyList: [],
      // 标签布局属性
      labelCol: { span: 3 },
      // 输入框布局属性
      wrapperCol: { span: 10 },
      form: this.$form.createForm(this),
      groupListTreeSelect: [],
      groupListTree: [],

      // 当前记录
      record: {
        tpl_id: adActionType.QWEI_QR_CODE.value,
        type: 10,
        position: 10,
        value: 50,
        size: 0,
        wx_work_setting_id: '',
        partyInfo: [],
        // party: [],
        // partyName: [],
        text: ''
      }
    }
  },

  mounted() {
    this.$emit('competed')
    this.createAdBox()
    // this._getDepartmentAll()
    optionList().then(res => {
      this.wxqyList = res.data
    })
  },

  methods: {
    handleChangeStorage (value) {
      this._getDepartmentAll(value)
    },
    _getDepartmentAll(id, num) {
      getDepartmentAll({wx_work_setting_id: id}).then((res) => {
        this.$nextTick(() => {
          if (num !== 2) {
          this.groupListTreeSelect = []
          this.record.partyInfo = []
          this.form.setFieldsValue({
            partyInfo: [],
          });
        }
          // 更新数据
          this.listToTree(res.data, this.groupListTreeSelect, 0)
        })
      })
    },

    /**
     * 数组转树形结构
     * @param list 源数组
     * @param tree 树
     * @param parentId 父ID
     */
    listToTree(list, tree, parentId) {
      list.forEach((item) => {
        // 判断是否为父级菜单
        if (item.parentid === parentId) {
          const child = {
            ...item,
            key: item.id,
            children: []
          }
          // 迭代 list， 找到当前菜单相符合的所有子菜单
          this.listToTree(list, child.children, item.id)
          // 删掉不存在 children 值的属性
          if (child.children.length <= 0) {
            delete child.children
          }
          // 加入到树中
          tree.push(child)
        }
      })
    },

    handleChangePositionType(e) {
      this.record.type = e.target.value
      const position = this.form.getFieldValue('position')
      if (this.record.type === 20 && (position === 20 || position === 40)) {
        this.form.setFieldsValue({ position: 10 })
        this.record.position = 10
      }
      this.createAdBox()
    },
    handleChangePosition(e) {
      this.record.position = e.target.value
      this.createAdBox()
    },
    handleChangePositionValue(val) {
      this.record.value = val
      this.createAdBox()
    },
    handleChangePositionSize(val) {
      this.record.size = val
      this.createAdBox()
    },
    createAdBox() {
      this.ad.setParams(this.record).createDiv()
    },
    setFormData(data) {
      console.log(8888, data, this.record);
      this.record = Object.assign(this.record, data, { tpl_id: adActionType.TEACHER_QR_CODE.value })
      this.record.partyInfo = data&&data.partyInfo&&data.partyInfo.map((x) => {
        return { value: x.id, label: x.name }
      })
      const {
        form: { setFieldsValue }
      } = this
      this.createAdBox()
      // 设置表单内容
      this.$nextTick(() => {
        const d = _.pick(this.record, ['type', 'position', 'partyInfo', 'value', 'text', 'size', 'wx_work_setting_id'])
      console.log(8888,d);
      if (d.wx_work_setting_id) this._getDepartmentAll(d.wx_work_setting_id, 2)
        setFieldsValue(d)
      })
    },
    getFormData() {
      return new Promise((resolve) => {
        const {
          form: { validateFields }
        } = this
        validateFields((errors, values) => {
          const { partyInfo, ...other } = values
          if (!errors) {
            resolve({
              ...other,
              partyInfo: partyInfo.map((x) => {
                return { id: x.value, name: x.label }
              })
            })
          }
        })
      })
    },
    handleInputText(e) {
      this.record.text = e.target.value
      this.createAdBox()
    }
  }
}
</script>

<style scoped></style>
